رابط عملکرد فرانت‌اند (Frontend Performance API): ناظر منابع (Resource Observer) برای نظارت بر بارگذاری

در چشم‌انداز دیجیتال امروز، عملکرد وب‌سایت از اهمیت بالایی برخوردار است. کاربران انتظار زمان‌های بارگذاری سریع و تجربیات یکپارچه را دارند. زمان‌های بارگذاری کند می‌تواند به نرخ پرش (bounce rate) بالاتر، کاهش تعامل و در نهایت، از دست رفتن درآمد منجر شود. بهینه‌سازی عملکرد وب‌سایت شما نیازمند درک عمیقی از نحوه بارگذاری و پردازش منابع توسط مرورگر است. اینجاست که رابط عملکرد فرانت‌اند (Frontend Performance API)، به‌ویژه ناظر منابع (Resource Observer)، وارد عمل می‌شود.

درک اهمیت نظارت بر بارگذاری منابع

نظارت بر بارگذاری منابع شامل ردیابی بارگذاری و پردازش منابع مختلف در یک صفحه وب، مانند تصاویر، اسکریپت‌ها، شیوه‌نامه‌ها و فونت‌ها است. با نظارت بر این منابع، توسعه‌دهندگان می‌توانند گلوگاه‌ها را شناسایی کنند، تحویل منابع را بهینه سازند و عملکرد کلی وب‌سایت را بهبود بخشند. ناظر منابع یک مکانیسم قدرتمند برای دستیابی به این هدف فراهم می‌کند.

چرا نظارت بر عملکرد حیاتی است؟

• تجربه کاربری بهبودیافته: زمان‌های بارگذاری سریع‌تر به تجربه‌ای لذت‌بخش‌تر و جذاب‌تر برای کاربر منجر می‌شود.
• کاهش نرخ پرش: کاربران احتمال کمتری دارد که وب‌سایتی را که سریع بارگذاری می‌شود، ترک کنند.
• بهبود سئو: موتورهای جستجو مانند گوگل، عملکرد وب‌سایت را به عنوان یک فاکتور رتبه‌بندی در نظر می‌گیرند.
• افزایش نرخ تبدیل: وب‌سایت‌های سریع‌تر اغلب نرخ تبدیل بالاتری را مشاهده می‌کنند.
• کاهش هزینه‌های زیرساخت: بهینه‌سازی تحویل منابع می‌تواند مصرف پهنای باند و بار سرور را کاهش دهد.

معرفی رابط عملکرد فرانت‌اند (Frontend Performance API)

رابط عملکرد فرانت‌اند مجموعه‌ای از رابط‌ها و اشیائی است که دسترسی به داده‌های مرتبط با عملکرد را در مرورگر فراهم می‌کند. این API به توسعه‌دهندگان اجازه می‌دهد تا جنبه‌های مختلف عملکرد وب‌سایت را اندازه‌گیری و تحلیل کنند، از جمله:

• زمان‌بندی ناوبری (Navigation Timing): زمان لازم برای بارگذاری یک صفحه وب را اندازه‌گیری می‌کند.
• زمان‌بندی منابع (Resource Timing): زمان لازم برای بارگذاری منابع جداگانه را اندازه‌گیری می‌کند.
• زمان‌بندی کاربر (User Timing): به توسعه‌دهندگان اجازه می‌دهد تا معیارهای عملکرد سفارشی تعریف کنند.
• API وظایف طولانی (Long Tasks API): وظایف طولانی‌مدتی که نخ اصلی را مسدود می‌کنند، شناسایی می‌کند.
• بزرگترین ترسیم محتوایی (Largest Contentful Paint - LCP): زمان لازم برای رندر بزرگترین عنصر محتوایی در صفحه را اندازه‌گیری می‌کند.
• تأخیر اولین ورودی (First Input Delay - FID): زمان لازم برای پاسخ مرورگر به اولین تعامل کاربر را اندازه‌گیری می‌کند.
• تغییر چیدمان تجمعی (Cumulative Layout Shift - CLS): پایداری بصری صفحه را اندازه‌گیری می‌کند.

ناظر منابع بخشی از رابط عملکرد فرانت‌اند است و راهی برای مشاهده و جمع‌آوری داده‌ها در مورد بارگذاری منابع جداگانه فراهم می‌کند.

ناظر منابع: یک بررسی عمیق

ناظر منابع به شما این امکان را می‌دهد که بارگذاری منابع در یک صفحه وب را با ارائه اعلان‌ها هنگام ایجاد ورودی‌های زمان‌بندی منابع، نظارت کنید. این امر به شما امکان می‌دهد عملکرد منابع جداگانه را ردیابی کرده و گلوگاه‌های بالقوه را شناسایی کنید.

ناظر منابع چگونه کار می‌کند

ناظر منابع با مشاهده PerformanceObserver و گوش دادن به انواع ورودی‌های عملکردی خاص، به‌ویژه ورودی‌های `resource` کار می‌کند. هر ورودی `resource` حاوی اطلاعات دقیقی در مورد بارگذاری یک منبع خاص است، از جمله:

• name: آدرس URL منبع.
• entryType: نوع ورودی عملکرد (در این مورد، `resource`).
• startTime: زمانی که بارگذاری منبع شروع شده است.
• duration: کل زمان صرف شده برای بارگذاری منبع.
• initiatorType: نوع عنصری که درخواست منبع را آغاز کرده است (مثلاً `img`، `script`، `link`).
• transferSize: اندازه منبع منتقل شده از طریق شبکه.
• encodedBodySize: اندازه منبع قبل از فشرده‌سازی.
• decodedBodySize: اندازه منبع پس از خارج شدن از حالت فشرده.
• connectStart: زمان دقیقا قبل از اینکه مرورگر شروع به برقراری اتصال با سرور برای بازیابی منبع کند.
• connectEnd: زمان دقیقا پس از اینکه مرورگر برقراری اتصال با سرور برای بازیابی منبع را به پایان می‌رساند.
• domainLookupStart: زمان دقیقا قبل از اینکه مرورگر جستجوی نام دامنه برای منبع را شروع کند.
• domainLookupEnd: زمان دقیقا پس از اینکه مرورگر جستجوی نام دامنه برای منبع را به پایان می‌رساند.
• fetchStart: زمان دقیقا قبل از اینکه مرورگر شروع به واکشی منبع کند.
• responseStart: زمان دقیقا پس از اینکه مرورگر اولین بایت از پاسخ را دریافت می‌کند.
• responseEnd: زمان دقیقا پس از اینکه مرورگر آخرین بایت از پاسخ را دریافت می‌کند.
• secureConnectionStart: زمان دقیقا قبل از اینکه مرورگر فرآیند دست‌دهی (handshake) را برای ایمن‌سازی اتصال فعلی شروع کند.
• requestStart: زمان دقیقا قبل از اینکه مرورگر درخواست منبع را از سرور، حافظه پنهان (cache) یا منبع محلی شروع کند.

ایجاد یک ناظر منابع

برای ایجاد یک ناظر منابع، باید از سازنده `PerformanceObserver` استفاده کرده و گزینه `entryTypes` را مشخص کنید:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    // Process the resource entry
    console.log(entry);
  });
});

observer.observe({ entryTypes: ['resource'] });
            

              
                Copy
              
            
          

این کد یک `PerformanceObserver` جدید ایجاد می‌کند که به ورودی‌های `resource` گوش می‌دهد. هنگامی که یک ورودی منبع جدید ایجاد می‌شود، تابع بازگشتی (callback) اجرا شده و شیء `entry` حاوی اطلاعات دقیق در مورد منبع است.

تحلیل داده‌های زمان‌بندی منابع

هنگامی که داده‌های زمان‌بندی منابع را در اختیار دارید، می‌توانید آن را برای شناسایی گلوگاه‌های عملکردی تحلیل کنید. در اینجا چند حوزه رایج برای بررسی آورده شده است:

• زمان‌های بارگذاری طولانی: منابعی را که بارگذاری آن‌ها زمان زیادی می‌برد شناسایی کرده و دلایل آن را بررسی کنید. این ممکن است به دلیل حجم زیاد فایل، سرورهای کند یا مشکلات شبکه باشد.
• اندازه‌های انتقال بزرگ: منابع با اندازه‌های انتقال بزرگ را شناسایی کرده و با فشرده‌سازی تصاویر، کوچک‌سازی کد (minifying) یا استفاده از تقسیم کد (code splitting)، بهینه‌سازی آن‌ها را در نظر بگیرید.
• زمان‌های اتصال کند: منابع با زمان‌های اتصال کند را بررسی کرده و استفاده از CDN یا بهینه‌سازی پیکربندی سرور خود را در نظر بگیرید.
• زمان‌های جستجوی DNS: منابع با زمان‌های جستجوی DNS کند را بررسی کرده و استفاده از پیش‌واکشی DNS (DNS prefetching) را در نظر بگیرید.

مثال‌های عملی استفاده از ناظر منابع

در اینجا چند مثال عملی از نحوه استفاده از ناظر منابع برای نظارت و بهینه‌سازی بارگذاری منابع آورده شده است:

مثال ۱: شناسایی تصاویر بزرگ

این مثال نشان می‌دهد چگونه می‌توان از ناظر منابع برای شناسایی تصاویری که از یک اندازه مشخص بزرگتر هستند استفاده کرد:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.initiatorType === 'img' && entry.transferSize > 100000) { // 100KB
      console.warn(`Large image detected: ${entry.name} (${entry.transferSize} bytes)`);
    }
  });
});

observer.observe({ entryTypes: ['resource'] });
            

              
                Copy
              
            
          

این کد برای هر تصویری که بزرگتر از ۱۰۰ کیلوبایت باشد، یک پیام هشدار در کنسول ثبت می‌کند.

مثال ۲: نظارت بر زمان بارگذاری اسکریپت‌ها

این مثال نشان می‌دهد چگونه می‌توان از ناظر منابع برای نظارت بر زمان بارگذاری فایل‌های جاوا اسکریپت استفاده کرد:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.initiatorType === 'script') {
      console.log(`Script loaded: ${entry.name} in ${entry.duration} ms`);
    }
  });
});

observer.observe({ entryTypes: ['resource'] });
            

              
                Copy
              
            
          

این کد آدرس URL و زمان بارگذاری هر فایل اسکریپت را در کنسول ثبت می‌کند.

مثال ۳: ردیابی بارگذاری فونت‌ها

فونت‌ها اغلب می‌توانند یک گلوگاه عملکردی باشند. این مثال نحوه نظارت بر زمان بارگذاری فونت‌ها را نشان می‌دهد:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.initiatorType === 'link' && entry.name.endsWith('.woff2')) { // Assuming WOFF2 fonts
      console.log(`Font loaded: ${entry.name} in ${entry.duration} ms`);
    }
  });
});

observer.observe({ entryTypes: ['resource'] });
            

              
                Copy
              
            
          

این کد آدرس URL و زمان بارگذاری هر فایل فونت WOFF2 را در کنسول ثبت می‌کند.

مثال ۴: شناسایی گلوگاه‌های منابع شخص ثالث

اغلب، مشکلات عملکرد از اسکریپت‌ها و منابع شخص ثالث ناشی می‌شود. این مثال نحوه شناسایی آن‌ها را نشان می‌دهد:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.name.includes('example.com')) { // Replace with the third-party domain
      console.warn(`Third-party resource: ${entry.name} took ${entry.duration} ms to load`);
    }
  });
});

observer.observe({ entryTypes: ['resource'] });
            

              
                Copy
              
            
          

این کد برای هر منبعی که از دامنه شخص ثالث مشخص شده بارگذاری شود، یک پیام هشدار به همراه زمان بارگذاری آن در کنسول ثبت می‌کند.

بهترین شیوه‌ها برای استفاده از ناظر منابع

برای استفاده مؤثر از ناظر منابع، این بهترین شیوه‌ها را دنبال کنید:

• زود شروع کنید: نظارت بر منابع را در اولین فرصت ممکن در فرآیند توسعه پیاده‌سازی کنید.
• به‌طور منظم نظارت کنید: به‌طور مداوم بارگذاری منابع را برای شناسایی و رفع مشکلات عملکردی نظارت کنید.
• بودجه‌های عملکردی تعیین کنید: برای انواع مختلف منابع، بودجه‌های عملکردی تعریف کرده و پیشرفت خود را در برابر این بودجه‌ها پیگیری کنید.
• از داده‌های دنیای واقعی استفاده کنید: داده‌های زمان‌بندی منابع را از کاربران واقعی جمع‌آوری کنید تا تصویر دقیق‌تری از عملکرد وب‌سایت به دست آورید.
• با ابزارهای نظارتی یکپارچه‌سازی کنید: ناظر منابع را با ابزارهای نظارتی یکپارچه کنید تا جمع‌آوری و تحلیل داده‌ها را خودکار کنید.
• برای دستگاه‌ها و شبکه‌های مختلف بهینه‌سازی کنید: در نظر بگیرید که عملکرد بارگذاری منابع در دستگاه‌ها و شبکه‌های مختلف چگونه متفاوت است و بر اساس آن بهینه‌سازی کنید.

تکنیک‌ها و ملاحظات پیشرفته

بافرسازی و ویژگی `buffered`

`PerformanceObserver` از بافر کردن ورودی‌های عملکرد پشتیبانی می‌کند. به‌طور پیش‌فرض، ورودی‌ها به محض وقوع تحویل داده می‌شوند. با این حال، می‌توانید ناظر را طوری پیکربندی کنید که ورودی‌ها را به صورت دسته‌ای با استفاده از ویژگی `buffered` تحویل دهد:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
}, { entryTypes: ['resource'], buffered: true });

observer.observe({ entryTypes: ['resource'] });
            

              
                Copy
              
            
          

تنظیم `buffered` به `true` باعث می‌شود تمام ورودی‌های موجود هنگام ایجاد ناظر تحویل داده شوند، که می‌تواند برای جمع‌آوری داده‌های تاریخی مفید باشد.

استفاده از `clear()` و `disconnect()`

برای متوقف کردن مشاهده ورودی‌های عملکرد، می‌توانید از متد `disconnect()` استفاده کنید:

            observer.disconnect();
            

              
                Copy
              
            
          

این کار باعث می‌شود ناظر دیگر ورودی‌های عملکرد جدیدی دریافت نکند. همچنین می‌توانید از متد `clear()` برای حذف تمام ورودی‌های بافر شده استفاده کنید:

            observer.clear();
            

              
                Copy
              
            
          

مدیریت خطا

پیاده‌سازی مدیریت خطای مناسب هنگام کار با Performance API مهم است. ممکن است این API در همه مرورگرها پشتیبانی نشود یا در صورت استفاده نادرست، خطا ایجاد کند. از بلوک‌های `try...catch` برای مدیریت خطاهای احتمالی استفاده کنید:

            try {
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      console.log(entry);
    });
  });

  observer.observe({ entryTypes: ['resource'] });
} catch (error) {
  console.error('PerformanceObserver not supported:', error);
}
            

              
                Copy
              
            
          

مثال‌های واقعی در سراسر جغرافیا

بیایید ببینیم چگونه این تکنیک‌ها می‌توانند در زمینه‌های جغرافیایی مختلف به کار گرفته شوند:

• کشورهای در حال توسعه با پهنای باند محدود: در مناطقی با پهنای باند متوسط پایین‌تر، اولویت‌بندی بهینه‌سازی منابع حیاتی است. این شامل فشرده‌سازی تهاجمی تصاویر، کوچک‌سازی کد و استراتژی‌های کشینگ کارآمد است. استفاده از CDNهای بهینه‌سازی شده برای این مناطق نیز می‌تواند عملکرد را به میزان قابل توجهی بهبود بخشد.
• بازارهای موبایل-محور: در کشورهایی که دسترسی به اینترنت موبایل غالب است، بر کاهش حجم داده‌ها و بهینه‌سازی برای دستگاه‌های تلفن همراه تمرکز کنید. این ممکن است شامل استفاده از تصاویر واکنش‌گرا، بارگذاری تنبل (lazy loading) و پیاده‌سازی سرویس‌ورکرها برای کشینگ آفلاین باشد.
• مناطق با شرایط شبکه متغیر: در مناطقی با اتصال شبکه نوسانی، استراتژی‌های بارگذاری تطبیقی را در نظر بگیرید که تحویل منابع را بر اساس سرعت اتصال کاربر تنظیم می‌کنند. به عنوان مثال، ارائه تصاویر با وضوح پایین‌تر یا غیرفعال کردن انیمیشن‌ها در اتصالات کندتر.
• برنامه‌های توزیع‌شده جهانی: برای برنامه‌هایی که به کاربران در سراسر جهان خدمات ارائه می‌دهند، استفاده از یک CDN جهانی و بهینه‌سازی برای مناطق زمانی و زبان‌های مختلف می‌تواند تجربه کاربری را به شدت افزایش دهد.

به عنوان مثال، یک وب‌سایت بزرگ تجارت الکترونیک که به کاربران در هند خدمات می‌دهد، ممکن است به دلیل پهنای باند متوسط پایین‌تر و استفاده زیاد از موبایل، فشرده‌سازی تصاویر و بهینه‌سازی موبایل را در اولویت قرار دهد. یک وب‌سایت خبری که کاربران در اروپا را هدف قرار داده است، ممکن است بر انطباق با GDPR و زمان‌های بارگذاری سریع برای بهبود تعامل کاربر تمرکز کند.

فراتر از ناظر منابع: فناوری‌های مکمل

ناظر منابع ابزار قدرتمندی است، اما زمانی بیشترین تأثیر را دارد که در کنار سایر تکنیک‌های بهینه‌سازی عملکرد استفاده شود:

• شبکه‌های تحویل محتوا (CDNs): CDNها محتوای وب‌سایت شما را در چندین سرور در سراسر جهان توزیع می‌کنند و باعث کاهش تأخیر و بهبود زمان بارگذاری می‌شوند.
• بهینه‌سازی تصاویر: بهینه‌سازی تصاویر با فشرده‌سازی، تغییر اندازه و استفاده از فرمت‌های مدرن تصویر مانند WebP می‌تواند حجم فایل آن‌ها را به میزان قابل توجهی کاهش دهد.
• کوچک‌سازی و باندل کردن کد: کوچک‌سازی و باندل کردن کدهای جاوا اسکریپت و CSS شما می‌تواند حجم فایل آن‌ها و تعداد درخواست‌های HTTP مورد نیاز برای بارگذاری‌شان را کاهش دهد.
• کشینگ (Caching): کشینگ به مرورگر اجازه می‌دهد تا منابع را به صورت محلی ذخیره کند و نیاز به دانلود مجدد آن‌ها در بازدیدهای بعدی را کاهش دهد.
• بارگذاری تنبل (Lazy Loading): بارگذاری تنبل، بارگذاری منابع غیرضروری را تا زمانی که به آن‌ها نیاز باشد به تأخیر می‌اندازد و زمان بارگذاری اولیه صفحه را بهبود می‌بخشد.
• سرویس‌ورکرها (Service Workers): سرویس‌ورکرها فایل‌های جاوا اسکریپتی هستند که در پس‌زمینه اجرا می‌شوند و می‌توانند درخواست‌های شبکه را رهگیری کنند، که این امکان کشینگ آفلاین و اعلان‌های فشاری (push notifications) را فراهم می‌کند.

نتیجه‌گیری

رابط عملکرد فرانت‌اند و ناظر منابع ابزارهای بسیار ارزشمندی برای نظارت و بهینه‌سازی عملکرد وب‌سایت فراهم می‌کنند. با درک نحوه بارگذاری و پردازش منابع، توسعه‌دهندگان می‌توانند گلوگاه‌ها را شناسایی کنند، تحویل منابع را بهینه سازند و تجربه کاربری برتری ارائه دهند. پذیرش این فناوری‌ها و بهترین شیوه‌ها برای ایجاد وب‌سایت‌های سریع، جذاب و موفق در دنیای امروز که عملکرد-محور است، ضروری است. نظارت و بهینه‌سازی مداوم کلید پیشرو ماندن و تضمین تجربه کاربری مثبت، صرف نظر از مکان یا دستگاه است.

به یاد داشته باشید که این استراتژی‌ها را برای مخاطبان خاص و زمینه جغرافیایی خود برای کسب نتایج بهینه تطبیق دهید. با ترکیب تخصص فنی با درک تفاوت‌های ظریف جهانی، می‌توانید وب‌سایت‌هایی بسازید که برای همه و در همه جا به خوبی عمل کنند.